Organization Chart

Organization Chart (WebWidget)

Represents hierarchical structures in a tree with rectangular nodes and edges. This widget is not suitable for cyclical structures. The color of the nodes and the size can be controlled from InstantView. The WebWidget can display a fully loaded tree or reload the individual nodes only when they are opened.

Use

Dependencies

• organization.html
• organization-directive.js
• dependencies/
  • d3.min.js
  • d3-orgchart.js
  • organization.css

Message interface

When describing the direction, the WebWidget is divided into its two components. The WebWidget implemented in HTML, which implements the presentation logic and user interaction in the browser, and the WebWidget implemented in InstantView, which supplies the other side with the data from ClassiX and controls it.

Type	Direction	Parameters	Description
get_options	HTML→IV	ZERO	The first message that the WebWidget sends once it has initialized. The widget expects an options message in response. The response is optional, it does not have to be sent.
get_root	HTML→IV	NULL	This message is sent directly after get_options. The widget expects a root message in response before it draws.
options	IV→HTML	OPTIONS	This message can be used to control the display of the organizational chart as long as it has not been initialized (root). An empty JSON object means that the default settings are not changed.
root	IV→HTML	NODE | ID	In response to the get_root message, the root node of the tree is to be passed here either as a node object or its ID as a parameter. In the case of the ID, the actual node is reloaded by a subsequent get_node message during initialization.
get_node	HTML→IV	ID	If the WebWidget has to dynamically reload a node because it only knows its ID, this message is triggered. A node message is expected in response. If a fully populated root node is given to the widget in the root message, no get_node messages are triggered by the widget.
node	IV→HTML	NODE	In response to a get_node request, IV should return a node object for the given ID.
Tax news
expand	IV→HTML	NULL | ID	Expands the node with the specified ID, or all nodes if NULL was specified as the ID. If you need to reload nodes to expand the corresponding nodes, they are requested via get_node before the nodes are actually expanded.
collapse	IV→HTML	NULL	Collapses all nodes so that only the root node is visible. This is the initial state after the widget is initialized. When unfolding again, however, already loaded nodes are not requested again via get_node.
reload	IV→HTML	NODE | ID	Completely reinitializes the widget with a new root node. All previously loaded nodes are discarded. This can be used to display a completely different hierarchy in the widget. By discarding the previously loaded nodes, IDs from the previous hierarchy can be reused for completely different objects. The appearance of the widget can be adjusted before reloading via another option message, so that the same WebWidget appears differently depending on the data displayed.

The Node Object

The node object is of type CX_JSON_OBJECT and represents one or more nodes in the organization chart. Each node is identified by an id, has an optional text and children.

Field	Type	Description
id	STRING | INTEGER	Unique identification of the node, which must be unique in the tree structure and is used to reference nodes in messages.
text	STRING	Optional text to be displayed in the node. If no text is specified, the id of the node is displayed.
children	ARRAY(ID | NODE)	A list of IDs or node objects that represent the child nodes of this node. If this field is not specified, the corresponding node cannot be expanded.

The option object

The options object is a CX_JSON_OBJECT, which can be used to selectively override the default options. The default values and their meaning are shown in the following table.

Field	Type	Value	Description
node.width	INTEGER	150	Width of a node in pixels
node.height	INTEGER	50	Height of a node in pixels
node.padding	INTEGER	20	Vertical and horizontal inner distance from text
node.vSpace	INTEGER	30	Vertical distance between two nodes (between two planes)
node.color.hasChildren	COLOR	{...}	The color in which to draw the nodes that contain additional child nodes to expand. Default: Gradient #FF8E00→#FF1600
node.color.hasNoChildren	COLOR	{...}	The color in which to draw the nodes that do not have child nodes. Default: Gradient #03A9F4→#0288E1
text.color.hasChildren	COLOR	#FFFFFF	The text color for nodes that contain child nodes
text.color.hasNoChildren	COLOR	#FFFFFF	The text color for nodes that do not contain child nodes
duration	INTEGER	750	Animation time for the opening and closing of nodes. (ms)

The Color Type

The color can be either a simple HTML color as STRING (e.g. #FF0000 = red) or an object that defines a vertical gradient.

Field	Type	Description
top	STRING	HTML color for the upper part of the node
bottom	STRING	HTML color for the lower part of the node